<template>
	<view>
		<view class="u-flex user-box u-p-0" @click="login">
			<!-- 头像 -->
			<div class="out_box">
				<view class="u-m-r-10">
					<u-avatar src='/static/user.jpg' size="140"></u-avatar>
				</view>
			</div>
			<!-- 名字 -->
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20 user_name">用户{{userData.userId}}</view>
			</view>
			<view class="u-m-l-10 u-p-10">
				<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
			</view>
		</view>
		<div class="down_box">
			<div class="contaner">
				<div class="box1"></div>
				<div class="box2"></div>
				<div class="box3"></div>
			</div>
		</div>
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="star-fill" @click="ToMyCollect" title="我的收藏"></u-cell-item>
				<u-cell-item icon="plus-circle-fill" @click="ToMyUnused" title="我的闲置"></u-cell-item>
				<u-cell-item icon="pushpin-fill" @click="ToMyBuy" title="我的求购"></u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="info-circle-fill" @click="ToInformation" title="软件信息"></u-cell-item>
				<u-cell-item icon="close-circle-fill" @click="loginOut" title="退出账号"></u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		registerApi,
		loginApi
	} from '../../api/user.js'
	import {
		onReady
	} from '@dcloudio/uni-app';
	const postData = reactive({
		openid: '',
		session_key: ''
	})
	const userData = reactive({
		userId: '点击此处登录'
	})
	const login = async () => {
		if (uni.getStorageSync('userId')) {
			uni.showToast({
				title: '您已在登录状态',
				icon: 'none'
			})
		} else {
			try {
				uni.showModal({
					title: '登录后才可发布闲置与求购',
					content: '是否同意获取权限',
					success: function(res) {
						if (res.confirm) {
							const userInfo = uni.getUserProfile({
								desc: '登录后才可发布闲置与求购',
								success: (res) => {
									uni.login({
										provider: 'weixin',
										success: (code) => {
											//console.log(code)
											//发起请求，获取openid
											uni.request({
												url: 'http://api.weixin.qq.com/sns/jscode2session',
												method: 'GET',
												data: {
													appid: 'wx449fc1af9ada0bbe',
													secret: 'e28f4953333d6a7aeafb45a3c86bcec2',
													js_code: code.code,
													grant_type: 'authorization_code'
												},
												success: (res2) => {
													//console.log(res2,'res2');
													// 发送用户信息到后端
													postData
														.openid =
														res2.data
														.openid
													postData
														.session_key =
														res2.data
														.session_key
													registerApi(
															postData
															)
														.then(
															response => {
																if (response &&
																	response
																	.code ===
																	200
																) {
																	const
																		loginData =
																		reactive({
																			openid: '',
																		})
																	loginData
																		.openid =
																		res2
																		.data
																		.openid
																	//console.log(loginData)
																	loginApi
																		(
																			loginData
																		)
																		.then(
																			response => {
																				console
																					.log(
																						response
																					)
																				uni.setStorageSync(
																					'userId',
																					response
																					.data
																					.userId
																				)
																				userData
																					.userId =
																					response
																					.data
																					.userId
																			}
																		)
																} else {
																	wx.showToast({
																		title: '失败',
																		icon: 'none'
																	});
																}
															})
												}
											})
										}
									})
								},
								fail: (err) => {
									// 处理获取用户信息失败的情况
									console.error('Failed to get user profile', err);
									wx.showToast({
										title: '获取用户信息失败',
										icon: 'none'
									});
								}
							});
						} else if (res.cancel) {
							uni.showToast({
								title: '您取消了授权',
								icon: 'none'
							})
						}
					}
				})

			} catch (error) {
				// 处理其他异常情况
				console.error('Error during login', error);
				wx.showToast({
					title: '登录时发生错误',
					icon: 'none'
				});
			}
		}

	};
	//软件信息
	const ToInformation = () => {
		uni.navigateTo({
			url: "../information/information"
		})
	}
	//我的闲置
	const ToMyUnused = () => {
		if (uni.getStorageSync('userId')) {
			uni.navigateTo({
				url: "../my_unused/my_unused"
			})
		} else {
			wx.showToast({
				title: '您还未登录',
				icon: 'error'
			})
		}
	}
	//我的求购
	const ToMyBuy = () => {
		if (uni.getStorageSync('userId')) {
			uni.navigateTo({
				url: "../my_buy/my_buy"
			})
		} else {
			wx.showToast({
				title: '您还未登录',
				icon: 'error'
			})
		}
	}
	//我的收藏
	const ToMyCollect = () => {
		if (uni.getStorageSync('userId')) {
			uni.navigateTo({
				url: "../my_collect/my_collect"
			})
		} else {
			wx.showToast({
				title: '您还未登录',
				icon: 'error'
			})
		}
	}
	//退出登录
	const loginOut = () => {
		if (uni.getStorageSync('userId')) {
			uni.showModal({
				title: '确定退出登录？',
				success: function(res) {
					if (res.confirm) {
						uni.clearStorageSync()
						uni.reLaunch({
							url: "../mine/mine"
						})
					}
				}
			})
		} else {
			wx.showToast({
				title: '您还未登录',
				icon: 'error'
			})
		}
	}
	onReady(() => {
		if (uni.getStorageSync("userId")) {
			userData.userId = uni.getStorageSync("userId")
		}
	})
</script>

<style lang="scss">
	page {
		background-color: #ededed;
		;
	}

	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		//border: 10px solid #e2dcca;
		background-color: #f5eedb;
	}

	.user_name {
		margin-top: 10px;
		font-weight: 700;
	}

	.contaner {
		display: flex;
	}

	.box1 {
		width: 60px;
		height: 2px;
		background-color: #8cbfb0;
	}

	.box2 {
		width: 60px;
		height: 2px;
		background-color: #efa836;
	}

	.box3 {
		width: 60px;
		height: 2px;
		background-color: #9c2c26;
	}

	.down_box {
		width: 100%;
		height: 30px;
		background-color: #1d1d1d;
		padding-top: 14px;
		padding-left: 10px;
	}

	.out_box {
		height: 100px;
		width: 100px;
		background-color: #f06733;
		padding-left: 5px;
		padding-top: 5px;
		border: 10px solid #df5e2f;
	}

	.u-flex-1 {
		margin-left: 10px;
	}
</style>